<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* *{
            outline: black;
        } */
        p{
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        li{
            list-style:none;;
        }
        .ul{
            display: none;
        }
        .header{
            width: 100%;
            height: 600px;
        }
    </style>
</head>
<body>
    <div class="header">
    <button>开关灯</button>
    <div>
        <input type="password" value="value">
        <div class="box">x</div>
    </div>
    <div>
        <p></p>
        <div class="del">x</div>
    </div>
    <div>
        <div class=" odd ">下拉</div>
        <ul class="ul">
            <li>猪蹄</li>
            <li>烧烤</li>
            <li>牛肉</li>
        </ul>
    </div>
</div>

    <script>
        let header = document.querySelector('.header');
        let btn = document.querySelector('button');
        btn.onclick = function(){
            if(header.style.backgroundColor == 'black'){
                header.style.backgroundColor = 'pink'
            }else{
            header.style.backgroundColor = 'black'
        }
        }
        
        let ip = document.querySelector('input');
        let box = document.querySelector('.box');
        ip.onfocus=function(){
            // this.value = '';
            this.style.outline = 'pink'
        }
        ip.onblur=function(){
            // this.value = 'value'
            this.style.outline = 'black'
        }
        box.onclick=function(){
            if(ip.type == 'text'){
                ip.type = 'password'
            }else{
                ip.type = 'text'
            }
        }
        let p = document.querySelector('p')
        let del = document.querySelector('.del');
        del.onclick = function(){
            p.style.display= 'none'
        }
        let ul = document.querySelector('ul');
        let odd = document.querySelector('.odd');
        odd.onmouseover = function(){
            ul.style.display = 'block'
        }
        odd.onmouseout = function(){
            ul.style.display = 'none'
        }

    </script>
</body>
</html>